/**
 * worldmap.js - 世界地图电影数据可视化
 * 使用 ECharts 库创建交互式世界地图，展示全球电影分布情况
 * 功能包括：
 * - 展示各国电影数量（气泡大小）
 * - 展示平均评分（气泡颜色）
 * - 显示代表作信息（悬浮提示）
 * - 国家间合作关系（动态连线）
 * - 重点区域特效（高评分国家）
 */

// 期望API返回的数据格式示例：
// [
//   {
//     country: '中国大陆',    // 国家中文名
//     count: 80,            // 该国电影数量
//     avg_rating: 8.2,      // 该国电影平均评分
//     top_movies: [         // 代表作列表
//       { 
//         title: '霸王别姬',  // 电影名称
//         rating: 9.6,      // 电影评分
//         year: '1993'      // 上映年份
//       }
//     ]
//   },
//   // ... 更多国家数据
// ]

// 当页面DOM内容加载完成后，执行主函数
document.addEventListener('DOMContentLoaded', function() {
    // 获取并验证地图容器元素
    const chartDOM = document.getElementById('worldmap');
    if (!chartDOM) {
        console.error('没有找到世界地图容器元素!');
        return;
    }

    // 初始化ECharts实例
    const chart = echarts.init(chartDOM);
    
    // 显示加载动画，提供良好的用户体验
    chart.showLoading({
        text: '全球电影数据加载中...',           // 加载提示文字
        color: '#14c8fd',                      // 加载动画颜色
        textColor: '#fff',                     // 文字颜色
        maskColor: 'rgba(34, 71, 126, 0.8)'    // 遮罩层颜色
    });

    /**
     * 国家坐标映射表
     * 为每个国家定义其在地图上的经纬度坐标
     * 格式：'国家英文名': [经度, 纬度]
     */
    const countryCoordinates = {
        'China': [105, 35],           // 中国
        'United States': [-95, 40],   // 美国
        'Japan': [138, 38],           // 日本
        'South Korea': [128, 36],     // 韩国
        'United Kingdom': [0, 55],    // 英国
        'France': [2, 47],            // 法国
        'Germany': [10, 51],          // 德国
        'Italy': [12, 43],            // 意大利
        'Spain': [-4, 40],            // 西班牙
        'Russia': [100, 60],          // 俄罗斯
        'India': [80, 20],            // 印度
        'Australia': [135, -25],      // 澳大利亚
        'Canada': [-95, 60],          // 加拿大
        'Brazil': [-55, -10],         // 巴西
        'Mexico': [-102, 23],         // 墨西哥
        'Hong Kong': [114, 22],       // 香港
        'Taiwan': [121, 23],          // 台湾
        'Thailand': [100, 15],        // 泰国
        'Singapore': [103, 1],        // 新加坡
        'Sweden': [18, 60],           // 瑞典
        'Denmark': [10, 56],          // 丹麦
        'Norway': [10, 62],           // 挪威
        'Finland': [25, 65],          // 芬兰
        'Netherlands': [5, 52],       // 荷兰
        'Belgium': [4, 50],           // 比利时
        'Switzerland': [8, 47],       // 瑞士
        'Austria': [13, 47],          // 奥地利
        'New Zealand': [170, -40],    // 新西兰
        'South Africa': [25, -30],    // 南非
        'Argentina': [-65, -35],      // 阿根廷
        'Chile': [-70, -30],          // 智利
        'Lebanon': [35.5, 33.8],      // 黎巴嫩
        'Iran': [53, 32],             // 伊朗
        'Ireland': [-8, 53]           // 爱尔兰
    };

    /**
     * 中英文国家名映射表
     * 用于将API返回的中文国家名转换为地图使用的英文名
     * 格式：'中文名': '英文名'
     */
    const countryNameMap = {
        '中国大陆': 'China',           // 中国
        '中国香港': 'China',           // 香港
        '中国台湾': 'China',           // 台湾
        '美国': 'United States',       // 美国
        '日本': 'Japan',               // 日本
        '韩国': 'South Korea',         // 韩国
        '英国': 'United Kingdom',      // 英国
        '法国': 'France',              // 法国
        '德国': 'Germany',             // 德国
        '意大利': 'Italy',             // 意大利
        '西班牙': 'Spain',             // 西班牙
        '俄罗斯': 'Russia',            // 俄罗斯
        '印度': 'India',               // 印度
        '澳大利亚': 'Australia',       // 澳大利亚
        '加拿大': 'Canada',            // 加拿大
        '巴西': 'Brazil',              // 巴西
        '墨西哥': 'Mexico',            // 墨西哥
        '泰国': 'Thailand',            // 泰国
        '新加坡': 'Singapore',         // 新加坡
        '瑞典': 'Sweden',              // 瑞典
        '丹麦': 'Denmark',             // 丹麦
        '挪威': 'Norway',              // 挪威
        '芬兰': 'Finland',             // 芬兰
        '荷兰': 'Netherlands',         // 荷兰
        '比利时': 'Belgium',           // 比利时
        '瑞士': 'Switzerland',         // 瑞士
        '奥地利': 'Austria',           // 奥地利
        '新西兰': 'New Zealand',       // 新西兰
        '南非': 'South Africa',        // 南非
        '阿根廷': 'Argentina',         // 阿根廷
        '智利': 'Chile',               // 智利
        '黎巴嫩': 'Lebanon',           // 黎巴嫩
        '伊朗': 'Iran',                // 伊朗
        '爱尔兰': 'Ireland'            // 爱尔兰
    };

    /**
     * 默认数据
     * 当API不可用时使用的备用数据
     * 确保地图始终有基础数据显示
     */
    let defaultData = [
        {
            country: '中国大陆',
            count: 80,
            avg_rating: 8.2,
            top_movies: [{title: '霸王别姬', rating: 9.6, year: '1993'}]
        },
        {country: '美国', count: 120, avg_rating: 8.5, top_movies: [{title: '肖申克的救赎', rating: 9.7, year: '1994'}]},
        {country: '日本', count: 60, avg_rating: 8.7, top_movies: [{title: '千与千寻', rating: 9.3, year: '2001'}]},
        {country: '韩国', count: 30, avg_rating: 8.4, top_movies: [{title: '寄生虫', rating: 8.9, year: '2019'}]},
        {country: '英国', count: 50, avg_rating: 8.3, top_movies: [{title: '黑暗骑士', rating: 9.2, year: '2008'}]}
    ];

    /**
     * 渲染世界地图
     * @param {Array} data - 电影数据数组
     */
    function renderWorldMap(data) {
        // 隐藏加载动画
        chart.hideLoading();
        
        // 数据处理：将API数据转换为地图所需格式
        const scatterData = data.map(item => {
            // 中文国家名转换为英文
            const enCountry = countryNameMap[item.country] || item.country;
            
            // 检查坐标信息完整性
            if (!countryCoordinates[enCountry]) {
                console.warn(`警告: 国家 "${item.country}" (${enCountry}) 没有坐标信息`);
            }
            
            // 返回格式化的数据点
            return {
                name: enCountry,
                rawName: item.country,    // 保留原始中文名
                value: [
                    countryCoordinates[enCountry]?.[0] || 0,  // 经度
                    countryCoordinates[enCountry]?.[1] || 0,  // 纬度
                    item.count,                               // 电影数量
                    item.avg_rating,                          // 平均评分
                    item.top_movies?.[0]?.title || '无数据',  // 代表作
                    item.top_movies?.[0]?.rating || 0         // 代表作评分
                ]
            };
        });

        // 配置ECharts选项
        const option = {
            backgroundColor: 'transparent',    // 背景透明
            
            // 标题配置
            title: {
                text: '全球电影分布地图',
                subtext: '气泡大小表示电影数量，颜色表示平均评分',
                left: 'center',
                top: 10,
                textStyle: {
                    color: '#fff',
                    fontSize: 18
                },
                subtextStyle: {
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 12
                }
            },
            
            // 提示框配置
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    // 自定义提示框内容
                    if (params.seriesType === 'scatter' || params.seriesType === 'effectScatter') {
                        const value = params.value;
                        const rawName = params.data?.rawName || params.name;
                        
                        // 返回HTML格式的提示框
                        return `
                            <div style="font-weight:bold;margin-bottom:8px;font-size:16px;color:#fff;">
                                ${rawName}
                            </div>
                            <table style="width:100%;border-spacing:0;border-collapse:collapse;">
                                <tr>
                                    <td style="padding:4px 0;color:#bbb;">电影数量:</td>
                                    <td style="padding:4px 0;text-align:right;font-weight:bold;color:#14c8fd;">
                                        ${value[2]}
                                    </td>
                                    <td style="padding:4px 0;text-align:right;color:#bbb;">部</td>
                                </tr>
                                <tr>
                                    <td style="padding:4px 0;color:#bbb;">平均评分:</td>
                                    <td style="padding:4px 0;text-align:right;font-weight:bold;color:#00ffea;">
                                        ${value[3].toFixed(1)}
                                    </td>
                                    <td style="padding:4px 0;text-align:right;color:#bbb;">分</td>
                                </tr>
                                <tr>
                                    <td style="padding:4px 0;color:#bbb;">代表作:</td>
                                    <td colspan="2" style="padding:4px 0;text-align:right;font-weight:bold;color:#ffbb44;">
                                        ${value[4]}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding:4px 0;color:#bbb;">作品评分:</td>
                                    <td style="padding:4px 0;text-align:right;font-weight:bold;color:#f93a64;">
                                        ${value[5]}
                                    </td>
                                    <td style="padding:4px 0;text-align:right;color:#bbb;">分</td>
                                </tr>
                            </table>
                        `;
                    }
                    return params.name;
                },
                backgroundColor: 'rgba(13, 26, 45, 0.9)',    // 提示框背景色
                borderColor: 'rgba(14, 200, 253, 0.3)',      // 边框颜色
                borderWidth: 1,                              // 边框宽度
                padding: 15                                  // 内边距
            },
            
            // 视觉映射组件配置
            visualMap: {
                type: 'continuous',          // 连续型视觉映射
                min: 7.5,                    // 最小评分
                max: 9.0,                    // 最大评分
                calculable: true,            // 显示手柄
                inRange: {
                    // 评分区间对应的颜色范围
                    color: ['#14c8fd', '#41f1b6', '#ffbb44', '#f93a64']
                },
                textStyle: {
                    color: '#e1e9fe'         // 文字颜色
                },
                left: 30,                    // 左边距
                bottom: 30,                  // 下边距
                text: ['高评分', '低评分'],   // 文本标签
                dimension: 3                 // 映射维度（评分）
            },
            
            // 地理坐标系配置
            geo: {
                map: 'world',               // 世界地图
                roam: true,                 // 允许缩放和平移
                zoom: 1.2,                  // 初始缩放比例
                center: [0, 20],            // 地图中心点
                itemStyle: {
                    areaColor: 'rgba(20, 40, 80, 0.85)',    // 区域颜色
                    borderColor: 'rgba(45, 115, 175, 0.7)',  // 边框颜色
                    borderWidth: 1                           // 边框宽度
                },
                emphasis: {
                    itemStyle: {
                        areaColor: 'rgba(45, 115, 175, 1)'   // 高亮颜色
                    }
                }
            },
            
            // 系列配置
            series: [
                // 散点图系列 - 显示各国电影数据
                {
                    name: '电影分布',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: scatterData,
                    symbolSize: function(val) {
                        // 根据电影数量计算气泡大小
                        return Math.min(40, Math.max(10, Math.sqrt(val[2]) * 2.8));
                    },
                    itemStyle: {
                        color: function(params) {
                            // 根据评分设置颜色
                            const rating = params.value[3];
                            if (rating >= 8.5) return '#f93a64';
                            if (rating >= 8.0) return '#ffbb44';
                            return '#14c8fd';
                        },
                        shadowBlur: 15,
                        shadowColor: 'rgba(255, 255, 255, 0.5)',
                        opacity: 0.8
                    },
                    animation: true
                },
                
                // 线图系列 - 显示国家间合作关系
                {
                    name: '合作关系',
                    type: 'lines',
                    coordinateSystem: 'geo',
                    zlevel: 1,
                    effect: {
                        show: true,           // 显示特效
                        period: 6,            // 动画周期
                        trailLength: 0.7,     // 尾迹长度
                        color: '#fff',        // 特效颜色
                        symbolSize: 3         // 特效大小
                    },
                    lineStyle: {
                        color: '#14c8fd',     // 线条颜色
                        width: 1,             // 线条宽度
                        opacity: 0.4,         // 透明度
                        curveness: 0.2        // 曲度
                    },
                    data: generateLinesData(scatterData)
                },
                
                // 涟漪散点图系列 - 显示重点区域
                {
                    name: '重点区域',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    // 筛选评分高的前5个国家
                    data: scatterData.filter(item => item.value[3] >= 8.5).slice(0, 5),
                    symbolSize: function(val) {
                        // 重点区域气泡略大
                        return Math.min(50, Math.max(15, Math.sqrt(val[2]) * 3.2));
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke',
                        scale: 4,
                        period: 4
                    },
                    itemStyle: {
                        color: '#f93a64',
                        shadowBlur: 20,
                        shadowColor: 'rgba(249, 58, 100, 0.6)',
                        opacity: 0.8
                    }
                }
            ]
        };

        /**
         * 生成连线数据
         * @param {Array} scatterData - 散点数据
         * @returns {Array} 连线数据数组
         */
        function generateLinesData(scatterData) {
            const linesData = [];
            // 定义中心点（北京）
            const centerPoint = {
                coord: [116.4551, 40.2539]
            };

            // 生成从中心点到各国的连线
            scatterData.forEach(item => {
                if (item.value[0] !== centerPoint.coord[0] && 
                    item.value[1] !== centerPoint.coord[1]) {
                    linesData.push({
                        coords: [
                            centerPoint.coord,
                            [item.value[0], item.value[1]]
                        ],
                        value: item.value[2]  // 使用电影数量作为值
                    });
                }
            });

            // 生成高评分国家之间的连线
            const highRatedPoints = scatterData.filter(item => item.value[3] >= 8.5);
            for (let i = 0; i < highRatedPoints.length; i++) {
                for (let j = i + 1; j < highRatedPoints.length; j++) {
                    linesData.push({
                        coords: [
                            [highRatedPoints[i].value[0], highRatedPoints[i].value[1]],
                            [highRatedPoints[j].value[0], highRatedPoints[j].value[1]]
                        ],
                        value: Math.min(
                            highRatedPoints[i].value[2], 
                            highRatedPoints[j].value[2]
                        )
                    });
                }
            }

            return linesData;
        }

        // 应用配置并渲染地图
        chart.setOption(option);
        console.log('地图已更新');
    }

    /**
     * 获取数据并渲染地图
     * 从API获取数据，处理后更新地图显示
     */
    function fetchAndRenderData() {
        console.log('开始获取地图数据...');
        
        // 发送API请求
        fetch('/api/worldmap')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('接口返回原始数据:', data);
                
                // 处理数据格式
                let realData;
                if (data && typeof data === 'object') {
                    if (Array.isArray(data)) {
                        realData = data;
                    } else if ('data' in data) {
                        realData = data.data;
                    } else if ('code' in data && 'data' in data) {
                        realData = data.data;
                    } else {
                        console.error('数据格式不正确:', data);
                        realData = defaultData;
                    }
                } else {
                    console.error('数据格式不正确:', data);
                    realData = defaultData;
                }

                // 验证数据格式
                if (!Array.isArray(realData)) {
                    console.error('数据不是数组格式:', realData);
                    realData = defaultData;
                } else if (realData.length > 0) {
                    // 验证数据项格式
                    const firstItem = realData[0];
                    if (!firstItem.country || typeof firstItem.count !== 'number') {
                        console.error('数据项格式不正确:', firstItem);
                        realData = defaultData;
                    }
                }

                console.log('最终使用的数据:', realData);
                // 更新默认数据并渲染地图
                if (realData !== defaultData) {
                    defaultData = realData;
                }
                renderWorldMap(realData);
            })
            .catch(error => {
                console.error('获取数据失败:', error);
                console.log('使用默认数据');
                renderWorldMap(defaultData);
            });
    }

    // 初始渲染（使用默认数据）
    renderWorldMap(defaultData);
    
    // 获取并使用实际数据更新地图
    fetchAndRenderData();

    // 监听窗口大小变化，自适应调整地图大小
    window.addEventListener('resize', function() {
        chart.resize();
    });
}); 